<template>
	<div>
		<slot :info="info"></slot>

		<el-tabs type="card" style="margin-top:20px;" v-model="activeName">
			<el-tab-pane label="商品信息" name="info">
				<product-detail-info v-model="info" @changed="infoChanged"
				                     :action="action"></product-detail-info>
			</el-tab-pane>
			<el-tab-pane label="图片" name="image" v-if="productId">
				<product-detail-image v-model="info"></product-detail-image>
			</el-tab-pane>
			<el-tab-pane label="参数表" name="parameter" v-if="productId">
				<product-detail-parameter :productId="info.id"></product-detail-parameter>
			</el-tab-pane>
			<el-tab-pane label="库存价格" name="sku" v-if="productId">
				<product-detail-sku :productId="info.id"></product-detail-sku>
			</el-tab-pane>
			<el-tab-pane label="关联商品" name="relation" v-if="productId">

				<ref-product v-model="info.relationships" :multi="true" @change="changeRelationship"
				             style="">
					选择关联商品
				</ref-product>

			</el-tab-pane>
		</el-tabs>
	</div>

</template>

<script type="text/ecmascript-6">
	import ProductDetailInfo from "./ProductDetailInfo.vue"
	import ProductDetailImage from "./ProductDetailImage.vue"
	import ProductDetailParameter from './ProductDetailParameter.vue'
	import ProductDetailSku from './ProductDetailSku.vue'

	import RefProduct from "../common/RefProduct"

	export default {
		components: {
			RefProduct,
			ProductDetailInfo,
			ProductDetailImage,
			ProductDetailParameter,
			ProductDetailSku
		},
		name: "product-detail",
		props: {
			productId: {type: String, default: ""},
			action: {type: String, default: "save"} //两种action: save,add
		},
		computed: {},
		data() {
			return {
				activeName: "info",
				info: {brand: {}, category: {name: '', code: ''}},
			}
		},
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {
				if (!this.productId) return;

				return this.$http.post('/info/product/get', {productId: this.productId}, {proxy: true}).then((res) => {
					var data = res.data.data;
					data.guidePrice_yuan = parseInt((data.guidePrice || 0) / 100);
					// data.salePrice_yuan =  parseInt((data.salePrice || 0) / 100)


					this.info = data;

					this.$emit("loaded", this.info);
				});
			},
			infoChanged() {
				this.loadData();
			},
			changeRelationship(data, id) {
				var changed = {added: data.added.map(it => it.id), deleted: data.deleted.map(it => it.id)};

				this.$http.post("/info/product/changeRelationship?productId=" + this.info.id, changed).then(res => {

				});
			}
		}
	}
</script>

